<template>
  <van-cell-group>
    <van-popup
      v-model="popupVis"
      :position="onAdd ? 'top' : 'bottom'"
      round
      get-container="body"
    >
      <van-field
        v-if="addVis"
        v-model="newName"
        style="margin-bottom: 100px"
        center
        clearable
        :placeholder="'请输入新增' + title"
      >
        <template #button>
          <van-button
            icon="plus"
            size="small"
            type="primary"
            @click="onAddItem"
          >
            添加
          </van-button>
          <van-button
            style="margin-left: 10px"
            icon="arrow"
            size="small"
            plain
            hairline
            @click="addVis = false"
          ></van-button>
        </template>
      </van-field>
      <van-picker
        v-else
        :title="'请选择' + title"
        :columns="columns"
        :default-index="defaultIndex"
        :show-toolbar="true"
        value-key="name"
        @confirm="onConfirm"
        @cancel="onCancel"
        :cancel-button-text="onAdd ? '新增' : '取消'"
      />
    </van-popup>
    <van-cell
      :title="title"
      :required="required == false ? false : true"
      is-link
      @click="
        () => {
          if (!disabled) popupVis = true
        }
      "
      :value="chooseName"
    />
  </van-cell-group>
</template>
<script>
export default {
  props: [
    'columns',
    'required',
    'title',
    'value',
    'defaultIndex',
    'onAdd',
    'onChoose',
    'disabled',
  ],
  data: function () {
    return {
      popupVis: false,
      chooseName: '',
      addVis: false,
      newName: null,
      chooseItem: null,
    }
  },
  methods: {
    onConfirm: function (item) {
      // console.log('item', item)
      this.chooseItem = item
      if (item) {
        this.chooseName = item.name
        this.$emit('input', item.id)
      } else {
        //新增则显示新增的项目
        this.chooseName = this.newName ? this.newName : ''
        this.$emit('input', null)
      }
      this.popupVis = false
      if (this.onChoose) {
        this.onChoose(item)
      }
    },
    onCancel: function () {
      if (this.onAdd) this.addVis = true
      else this.popupVis = false
    },
    onAddItem: function () {
      this.onConfirm()
      this.onAdd(this.newName)
    },
  },
  watch: {
    value: function () {
      if (this.chooseItem && this.chooseItem.id == this.value) return //防止触发两次
      var item = this.columns.find((x) => x.id == this.value)
      this.onConfirm(item)
    },
    columns: function () {
      var item = this.columns.find((x) => x.id == this.value)
      if (item) {
        this.onConfirm(item)
      } else {
        if (this.defaultIndex >= 0 && this.columns.length > this.defaultIndex) {
          this.onConfirm(this.columns[this.defaultIndex])
        } else this.onConfirm()
      }
    },
  },
  mounted: function () {
    if (this.columns)
      if (this.columns.length > 0) {
        var item = this.columns.find((x) => x.id == this.value)
        if (item) {
          this.onConfirm(item)
        } else {
          if (
            this.defaultIndex >= 0 &&
            this.columns.length > this.defaultIndex
          ) {
            this.onConfirm(this.columns[this.defaultIndex])
          } else this.onConfirm()
        }
      }
  },
}
</script>
<style scoped>
.van-cell__value {
  min-width: 65%;
  span {
    display: inline-block;
    text-align: left;
    word-break: break-all;
  }
}
</style>
